<template>
  <!--头部导航-->
  <div class="nav_bg">
    <div class="center">
      <el-row>
        <el-col :span="18">
          <ul>
            <li>
              <RouterLink to="/user/index">商城首页</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/orderList">我的订单</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/collectList">我的收藏</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/Info">个人中心</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/recharge">余额充值</RouterLink>
            </li>
            <li>
              <RouterLink to="/admin/login">管理员登录</RouterLink>
            </li>
          </ul>
        </el-col>
        <el-col :span="6">
          <ul class="user">
            <template v-if="!userStore.userInfo">
            <li>
              <RouterLink to="/user/login">登录</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/reg">注册</RouterLink>
            </li>
            </template>
          <!-- 用户名和退出登录 -->
            <template v-else>
              <li class="cartLi">
                <RouterLink to="/user/cart"><el-icon><ShoppingCart/></el-icon>购物车</RouterLink>
              </li>
              <li>
                <RouterLink to="/user/orderList">{{ userStore.userInfo.username }}</RouterLink>
              </li>
              <li>
                <el-link :underline="false" @click="logout">退出</el-link>
              </li>
            </template>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
  <!-- 头部搜索 -->
  <div class="center">
    <el-row>
      <el-col :span="16">
        <img src="/src/assets/jdlogo2.png" style="height: 60px; margin-top: 10px; margin-bottom: 3px; margin-right: 10px"/>
        <img src="/src/assets/jdlogo.png" style="height: 40px; margin-top: 10px; margin-bottom: 10px"/>
      </el-col>
      <el-col :span="8">
        <div class="search">
        <!-- 搜索按钮 -->
        <el-button  :icon="Search" class="search_btn" @click="search()">
        </el-button>
        <!-- 搜索框 -->
        <el-input type="text" v-model="goodsName.name" class="search_input" placeholder="请输入商品名称"/>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- 上架的一级分类 -->
  <div class="center">
    <ul class="category">
      <li v-for="(category,index) in parentList" :key="index"><RouterLink :to= "`/user/search/${category.id}`">{{category.name}}</RouterLink></li>
    </ul>
  </div>
</template>

<script setup>
import { Search, ShoppingCart} from "@element-plus/icons-vue";
import categoryApi from "@/api/categoryApi.js";
import {ref} from "vue";
import {useUserStore} from "@/stores/user.js";
import {useTokenStore} from "@/stores/token.js";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
import {useSearchStore} from "@/stores/search.js";
import {useRoute} from "vue-router";

const route = useRoute();
const searchStore = useSearchStore();
//搜索输入
const goodsName = ref({
  name:null
});
const router = useRouter();
const tokenStore = useTokenStore()
const userStore = useUserStore()
const parentList = ref([])

function search(){
  searchStore.updateSearch(goodsName.value)
  if(route.path == '/user/searchAll'){
    location.reload();
  }else {
    router.push("/user/searchAll");
  }
  goodsName.value = {
    name:null
  }
}

//1.获取父分类 2.上架
function getParent(){
    const condition = {
      parentId:0,
      status:1
    }
    categoryApi.selectByPage(condition)
        .then(resp => {
          parentList.value = resp.data;
        })
}
//注销
function logout(){
  ElMessageBox.confirm(
      '确认退出该用户吗?',
      '退出',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        //清空token
        tokenStore.$reset();
        //清空用户信息
        userStore.$reset();
        //跳转到前台首页
        router.push("/user/index");
        ElMessage({
          message: "成功退出",
          type: 'success',
          duration: 1500
        })
      })
}


getParent();
</script>

<style scoped>
.cartLi .el-icon{
  top:4px
}
.nav_bg {
  background-color: var(--theme-bg-color);
  line-height: 40px;
}

.nav_bg ul li {
  float: left;
  margin-right: 20px;
}

a {
  color: #999;
}

a:hover {
  color: #FFF;
}

.user li {
  float: right;
}

.search_input {
  width: 250px;
  float: right;

}
.search_btn{
  color: #FFF;
  float: right;
  margin-left: 5px;
  border-radius: 0px;
  border: 0px;
  background-color: var(--theme-color);
}
.search {
  padding-top: 20px;
}
.search_btn:hover{
  background-color: wheat;
}
.category{
  background-color: var(--theme-color);
  line-height: 30px;
}
.category li {
  float: left;
  padding: 0 10px;
}
.category li a{
  color: white;
}
.category li:hover{
  background-color: wheat;
}
</style>